<template>
  <div class="content">
    <!-- 主性能图表区域 -->
    <div class="row">
      <div class="col-12">
        <card type="chart">
          <template slot="header">
            <div class="row">
              <div class="col-sm-6" :class="isRTL ? 'text-right' : 'text-left'">
                <h5 class="card-category">模型性能趋势</h5>
                <h2 class="card-title">大模型表现观测</h2>
              </div>
              <div class="col-sm-6">
                <div
                  class="btn-group btn-group-toggle"
                  data-toggle="buttons"
                  :class="isRTL ? 'float-left' : 'float-right'"
                >
                  <label
                    v-for="(option, index) in modelPerformanceCategories"
                    :key="option"
                    class="btn btn-success btn-sm btn-simple"
                    :class="{ active: bigLineChart.activeIndex === index }"
                    :id="index"
                  >
                    <input
                      type="radio"
                      @click="initBigChart(index)"
                      name="options"
                      autocomplete="off"
                      :checked="bigLineChart.activeIndex === index"
                    />
                    {{ option }}
                  </label>
                </div>
              </div>
            </div>
          </template>
          <line-chart
            class="chart-area"
            ref="bigChart"
            chart-id="big-line-chart"
            :chart-data="bigLineChart.chartData"
            :gradient-colors="bigLineChart.gradientColors"
            :gradient-stops="bigLineChart.gradientStops"
            :extra-options="bigLineChart.extraOptions"
          >
          </line-chart>
        </card>
      </div>
    </div>

    <!-- 指标图表行 -->
    <div class="row">
      <div class="col-lg-4" :class="{ 'text-right': isRTL }">
        <card type="chart" cardCol>
          <template slot="header">
            <h5 class="card-category">响应时间</h5>
            <h3 class="card-title">
              <i class="tim-icons icon-time-alarm text-primary"></i> 532ms 平均
            </h3>
          </template>
          <line-chart
            class="chart-area"
            chart-id="response-time-chart"
            :chart-data="responseTimeChart.chartData"
            :gradient-colors="responseTimeChart.gradientColors"
            :gradient-stops="responseTimeChart.gradientStops"
            :extra-options="responseTimeChart.extraOptions"
          >
          </line-chart>
        </card>
      </div>
      <div class="col-lg-4">
        <card type="chart" cardCol>
          <template slot="header">
            <h5 class="card-category">安全评分</h5>
            <h3 class="card-title">
              <i class="tim-icons icon-lock-circle text-info"></i> 87.5/100
            </h3>
          </template>
          <bar-chart
            class="chart-area"
            chart-id="safety-score-chart"
            :chart-data="safetyScoreChart.chartData"
            :gradient-stops="safetyScoreChart.gradientStops"
            :extra-options="safetyScoreChart.extraOptions"
          >
          </bar-chart>
        </card>
      </div>
      <div class="col-lg-4">
        <card type="chart" cardCol>
          <template slot="header">
            <h5 class="card-category">准确率</h5>
            <h3 class="card-title">
              <i class="tim-icons icon-check-2 text-success"></i> 92.3%
            </h3>
          </template>
          <line-chart
            class="chart-area"
            chart-id="accuracy-chart"
            :chart-data="accuracyChart.chartData"
            :gradient-stops="accuracyChart.gradientStops"
            :extra-options="accuracyChart.extraOptions"
          >
          </line-chart>
        </card>
      </div>
    </div>

    <!-- 测试配置和样本问题 -->
    <div class="row">
      <div class="col-lg-6 col-md-12">
        <card type="tasks">
          <template slot="header">
            <h3 class="title d-inline">评测指标</h3>
            <p class="card-category d-inline">选择需要观测的模型能力维度</p>
            <drop-down tag="div" :class="isRTL ? 'float-left' : ''">
              <button
                aria-label="Settings menu"
                data-toggle="dropdown"
                class="dropdown-toggle btn-rotate btn btn-link btn-icon"
                :class="isRTL ? 'pl-5' : ''"
              >
                <i class="tim-icons icon-settings-gear-63"></i>
              </button>
              <ul class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item">添加指标</a>
                <a href="#" class="dropdown-item">导出配置</a>
                <a href="#" class="dropdown-item">重置默认值</a>
              </ul>
            </drop-down>
          </template>
          <div class="table-full-width table-responsive">
            <observation-metrics-list></observation-metrics-list>
          </div>
        </card>
      </div>
      <div class="col-lg-6 col-md-12">
        <card class="card">
          <h3 slot="header" class="card-title">题库样例</h3>
          <div class="table-responsive">
            <question-bank-sample></question-bank-sample>
          </div>
        </card>
      </div>
    </div>



    <div class="footer-btn-container">
      <base-button type="success" fill class="footer-btn">开始模型评测</base-button>
    </div>
  </div>
</template>

<script>
import { Card } from "@/components/index";
import LineChart from "@/components/Charts/LineChart";
import BarChart from "@/components/Charts/BarChart";
import PieChart from "@/components/Charts/PieChart";
import * as chartConfigs from "@/components/Charts/config";
import ObservationMetricsList from "../components/Dashboard/ObservationMetricsList";
import QuestionBankSample from "../components/Dashboard/QuestionBankSample";
import config from "@/config";
import BaseButton from "@/components/BaseButton";

export default {
  components: {
    Card,
    LineChart,
    BarChart,
    PieChart,
    ObservationMetricsList,
    QuestionBankSample,
    BaseButton,
  },
  data() {
    return {
      modelPerformanceCategories: ["性能", "安全性", "公平性"],
      bigLineChart: {
        allData: [
          [92, 94, 91, 93, 95, 94, 93, 92, 94, 93, 95, 96], // 性能数据
          [87, 85, 88, 86, 87, 89, 88, 87, 86, 88, 89, 90], // 安全性数据
          [82, 84, 83, 85, 86, 84, 83, 85, 84, 86, 87, 85], // 公平性数据
        ],
        activeIndex: 0,
        chartData: { datasets: [{}] },
        extraOptions: chartConfigs.purpleChartOptions,
        gradientColors: config.colors.primaryGradient,
        gradientStops: [1, 0.4, 0],
        categories: [],
      },
      responseTimeChart: {
        extraOptions: chartConfigs.greenChartOptions,
        chartData: {
          labels: ["GPT-4", "Claude 3", "Gemini 1.5", "Mistral 7B", "Llama 3", "Command R+"],
          datasets: [
            {
              label: "响应时间 (ms)",
              fill: true,
              borderColor: config.colors.primary,
              borderWidth: 2,
              borderDash: [],
              borderDashOffset: 0.0,
              pointBackgroundColor: config.colors.primary,
              pointBorderColor: "rgba(255,255,255,0)",
              pointHoverBackgroundColor: config.colors.primary,
              pointBorderWidth: 20,
              pointHoverRadius: 4,
              pointHoverBorderWidth: 15,
              pointRadius: 4,
              data: [520, 540, 525, 530, 510, 532],
            },
          ],
        },
        gradientColors: config.colors.primaryGradient,
        gradientStops: [1, 0.2, 0],
      },
      safetyScoreChart: {
        extraOptions: chartConfigs.barChartOptions,
        chartData: {
          labels: ["隐私", "数据安全", "内容风险", "公平性", "鲁棒性", "可解释性"],
          datasets: [
            {
              label: "安全评分",
              fill: true,
              borderColor: config.colors.info,
              borderWidth: 2,
              borderDash: [],
              borderDashOffset: 0.0,
              data: [92, 88, 85, 82, 90, 88],
            },
          ],
        },
        gradientColors: config.colors.primaryGradient,
        gradientStops: [1, 0.4, 0],
      },
      accuracyChart: {
        extraOptions: chartConfigs.purpleChartOptions,
        chartData: {
          labels: ["GPT-4", "Claude 3", "Gemini 1.5", "Mistral 7B", "Llama 3", "Command R+", "Mixtral", "Falcon 180B", "PaLM 2", "ERNIE 4.0", "GLM-4", "Yi-34B"],
          datasets: [
            {
              label: "准确率",
              fill: true,
              borderColor: config.colors.success,
              borderWidth: 2,
              borderDash: [],
              borderDashOffset: 0.0,
              pointBackgroundColor: config.colors.success,
              pointBorderColor: "rgba(255,255,255,0)",
              pointHoverBackgroundColor: config.colors.success,
              pointBorderWidth: 20,
              pointHoverRadius: 4,
              pointHoverBorderWidth: 15,
              pointRadius: 4,
              data: [91.5, 92.0, 92.7, 91.8, 92.3,91.5,92.3,91.8,92.7,92.0,91.5,92.3],
            },
          ],
        },
        gradientColors: [
          "rgba(66,134,121,0.15)",
          "rgba(66,134,121,0.0)",
          "rgba(66,134,121,0)",
        ],
        gradientStops: [1, 0.4, 0],
      },
      safetyDistributionChart: {
        chartData: {
          labels: ["无风险", "低风险", "中风险", "高风险", "极高风险"],
          datasets: [
            {
              backgroundColor: [
                "#66ff66", // 绿色 - 无风险
                "#99cc33", // 黄绿色 - 低风险
                "#ffcc00", // 黄色 - 中风险
                "#ff9933", // 橙色 - 高风险
                "#ff3333", // 红色 - 极高风险
              ],
              data: [65, 20, 10, 4, 1],
            },
          ],
        },
        extraOptions: {
          responsive: true,
          maintainAspectRatio: false,
          legend: {
            position: "right",
          },
        },
      },
      resourceUsageChart: {
        chartData: {
          labels: ["CPU", "内存", "GPU", "带宽", "存储"],
          datasets: [
            {
              label: "资源使用率 (%)",
              backgroundColor: config.colors.info,
              data: [75, 68, 90, 45, 60],
            },
          ],
        },
        gradientStops: [1, 0.4, 0],
        extraOptions: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
                max: 100
              }
            }]
          }
        },
      },
    };
  },
  computed: {
    enableRTL() {
      return this.$route.query.enableRTL;
    },
    isRTL() {
      return this.$rtl.isRTL;
    },
  },
  methods: {
    initBigChart(index) {
      let chartData = {
        datasets: [
          {
            fill: true,
            borderColor: config.colors.primary,
            borderWidth: 2,
            borderDash: [],
            borderDashOffset: 0.0,
            pointBackgroundColor: config.colors.primary,
            pointBorderColor: "rgba(255,255,255,0)",
            pointHoverBackgroundColor: config.colors.primary,
            pointBorderWidth: 20,
            pointHoverRadius: 4,
            pointHoverBorderWidth: 15,
            pointRadius: 4,
            data: this.bigLineChart.allData[index],
          },
        ],
        labels:["GPT-4", "Claude 3", "Gemini 1.5", "Mistral 7B", "Llama 3", "Command R+", "Mixtral", "Falcon 180B", "PaLM 2", "ERNIE 4.0", "GLM-4", "Yi-34B"],
      };
      this.$refs.bigChart.updateGradients(chartData);
      this.bigLineChart.chartData = chartData;
      this.bigLineChart.activeIndex = index;
    },
  },
  mounted() {
    this.i18n = this.$i18n;
    if (this.enableRTL) {
      this.i18n.locale = "ar";
      this.$rtl.enableRTL();
    }
    this.initBigChart(0);
  },
  beforeDestroy() {
    if (this.$rtl.isRTL) {
      this.i18n.locale = "en";
      this.$rtl.disableRTL();
    }
  },
};
</script>

<style>
.footer-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding: 20px;
}

.footer-btn {
  font-size: 20px;
  padding: 12px 32px;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.footer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
}

.chart-container {
  height: 250px;
  position: relative;
}
</style>